<template>
  <div>
    <div style="margin-top: 10px; margin-bottom:10px;boder:10px">
      <el-button size="small" style="float: right" @click="add">添加场馆</el-button>
        <el-dialog title="添加场馆" :visible.sync="dialogFormVisible">
          <el-form :model="addNumber">
            <el-form-item label="场馆号">
              <el-input v-model="addNumber.number"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false">取 消</el-button>
            <el-button type="primary" @click="open">确 定</el-button>
          </div>
      </el-dialog>
    </div>
    <br>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <!-- <template slot="extra">
          <el-button type="primary" size="small" @click="addNumbber">添加场馆</el-button>
        </template> -->
        <el-table-column
          prop="s_id"
          label="场馆id"
          align="center"
          width="100">
        </el-table-column>

        <el-table-column
          prop="number"
          label="场馆"
          align="center"
          width="500">
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <br>
    </div>
    <div>
      <el-table
        :data="tableData2"
        stripe
        style="width: 100%">

        <el-table-column
          align="center"
          prop="r_id"
          label="预定编号"
          width="100">
        </el-table-column>

        <el-table-column
          align="center"
          prop="type"
          label="场馆类型"
          width="180">
        </el-table-column>

        <el-table-column
          align="center"
          prop="number"
          label="场馆信息"
          width="180">
        </el-table-column>

        <el-table-column
          align="center"
          prop="date"
          label="日期">
        </el-table-column>

        <el-table-column
          align="center"
          prop="time"
          label="时间">
        </el-table-column>

        <el-table-column
          align="center"
          prop="username"
          label="预约人">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Common from "../../utils/Common.vue";
import {mapMutations, mapState} from "vuex"

export default {
  data(){
    return{
      //提交表单的确定和取消键
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '80px',
      addNumber:{
        number:'',
        type:'网球馆'
      },
      tableData:[{
        s_id:'',
        number:'',
        handleDelete:''
      }],
      transData:{
        username:'',
        type:"网球馆",
        number:'',
        s_id:'',
      },
      tableData2:[{
        r_id:'',
        type:'',
        number:'',
        date:'',
        time:'',
        username:''
      }],
    }
  },
  computed:{
      userName:{
        get(){
          return this.$store.state.username
        },
        set(val){
          this.$store.commit('username', val)
        }
      },
    // ...mapState(["username"])
  },
  mounted() {
    this.getInit();
    this.getInit2();
    },
  methods:{
    ...mapMutations(['username']),
    getInit() {
      this.transData.username=this.$store.state.username;
      console.log(this.transData.username);
      this.$axios({
        headers: {
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
        method: "GET",
        url: Common.base_url + "/admin/stadiums/" + this.transData.username + "/网球馆",
      })
        .then((res) => {
          console.log(res.data);
          console.log([res.data.data]);
          if(res.data.code==200)
          {
            console.log("获取场馆信息成功");
            this.tableData=res.data.data;
          }
          else if(res.data.code==500){
            this.$message({
              message: res.data.message,
              type: "error",
            })
          } 
        })
        .catch((error) => {
          console.log("获取场馆信息失败");
        });
      },
    getInit2(){
      // this.transData.username=this.$store.state.username;
      // console.log(this.transData.username);
      this.$axios({
        headers: {
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
        method: "GET",
        url: Common.base_url + "/admin/reservations/" + this.transData.username + "/网球馆",
      })
        .then((res) => {
          console.log(res.data);
          console.log([res.data.data]);
          if(res.data.code==200)
          {
            console.log("获取场馆信息成功");
            this.tableData2=res.data.data;
          }
          else if(res.data.code==500){
            this.$message({
              message: res.data.message,
              type: "error",
            })
          } 
        })
        .catch((error) => {
          console.log("获取场馆信息失败");
        });
    },
    handleDelete(row) {
        this.row=row;
        // console.log(row);
        this.$confirm("确定删除该场馆？",{
          comfirmButtonText:"确定",
          cancelButtonTRext:"取消",
          type:"warning",
        }).then(()=>{
        this.transData.s_id=this.row.s_id;
        console.log(this.transData.s_id);
        this.$axios({
          headers: {
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
          method:"DELETE",
          url:Common.base_url + "/admin/stadiums/" + this.transData.username + "/"+this.transData.s_id,
        }).then((res) => {
          console.log(res.data);
          if(res.data.code==200){
            console.log("删除场馆成功");
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getInit();
          }
          else if(res.data.code==500){
            this.$message({
              message: res.data.message,
              type: "error",
            })
          } 
        })
        
      }).catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      },
      add(){
        this.dialogFormVisible=true;
      },
    //提交表单
    open() { 
      console.log(this.addNumber)
      this.$axios({
        headers: {
                "Content-Type": "application/json", 
                "token":this.$store.state.token,
                "username":this.$store.state.username,
              },
        method: "POST",
        url: Common.base_url + "/admin/stadiums/"+ this.transData.username,
        transformRequest:[function(data){
          return JSON.stringify(data);
        }],
        data: this.addNumber
      }).then((res) => {
        // 请求成功，代表与服务器建立连接,打印出post的数据
        console.log(res.data);
        if (res.data.code == 200 ) {
          console.log("请求成功！");
          this.$message({
            message: "添加场馆成功！",
            type: "success",
          })
          this.dialogFormVisible=false;
          this.getInit();
        }
        else if(res.data.code==500){
            this.$message({
              message: res.data.message,
              type: "error",
            })
          } 
        else {
          // 登录失败，弹出提示
          console.log("请求失败！");
          this.$message({
            message: "添加场馆失败！",
            type: "error",
          })
        }
      }).catch((err)=>{
            console.log("error")
          }
          )
      }
  }

}
</script>
